<template>
  <md-popup v-model="show" position="bottom">
    <md-popup-title-bar only-close :title="$t('box.token.asset')" :describe="$t('box.token.describe')" title-align="left" @cancel="show = false" />
    <div style="background: #fff; padding: 20px">
      <md-input-item v-model="to" :placeholder="$t('box.token.to')" is-highlight></md-input-item>
      <div style="padding-top: 20px">
        <md-button type="primary" :loading="loading" @click="action" round>{{ $t('confirm') }}</md-button>
      </div>
    </div>
  </md-popup>
  <Confirm ref="confirm" />
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { asset } from '@/api/box'
import { toast } from '@/style'
import { t } from '@/lang'
import { packager, random } from '@/web3'
import Nav from '@/components/nav.vue'
import Confirm from '@/components/confirm.vue'

const confirm = ref(null)
const show = ref(false)
const loading = ref(false)
const id = ref(0)
const to = ref('')

const open = (data) => {
  show.value = true
  id.value = data
}

const action = () => {
  confirm.value.open([t('box.token.unit')], to.value, 'center_gas_description', async () => {
    // 打包数据
    const pack = await packager({random: random(), token_id: id.value, uuid: to.value })
    
    loading.value = true
    asset(pack).then(res => {
      toast(t('ok'))
      show.value = false
    }).catch(err => {
      toast(err.message)
    }).finally(() => {
      loading.value = false
    })
  })
}

defineExpose({ open })

</script>